<template>

	<div style="text-align: center;">
		<div style="margin-top: 2vh;font-size: 3vh;">登录</div>
		<div style="text-align: center;margin-top: 20vh;">
			<img src="@/assets/logo.png" style="width: 10vh;height: 10vh;">
		</div>
		<CheckCodeForm ref="checkCodeForm"></CheckCodeForm>
		<el-link type="primary" :underline="false" @click="showRegister=true">没有账号? 注册一个</el-link>
		<div class="next" @click="loginButtonHandler">
			<el-icon>
				<Right />
			</el-icon>
		</div>
		<van-popup v-model:show="showRegister" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<RegisterPage :close="closeRegisterPage"></RegisterPage>
		</van-popup>
	</div>
</template>

<script>
	import CheckCodeForm from '@/components/units/CheckCodeForm.vue'
	import RegisterPage from './RegisterPage.vue';
	import url from '@/assets/url.json';
	import {
		showNotify
	} from 'vant';
	export default {
		props:{
			close:Function
		},
		components: {
			CheckCodeForm,
			RegisterPage
		},
		data() {
			return {
				showRegister: false
			}
		},
		methods: {
			loginButtonHandler() {
				let formData = this.$refs.checkCodeForm.getData();
				this.$axios({
					url:url.ip+"/api-user/user/login/checkCode/"+formData.phonenumber+"/"+formData.checkcode,
					method:'GET',
				}).then((res)=>{
					if(res.data.code===0){
						showNotify({ type: 'success', message: "登录成功" });
						this.$cookies.set('token',res.data.data.token);
						this.close();
					}else{
						showNotify({ type: 'danger', message: res.data.message });
					}
				}).catch((err)=>{
					console.log(err);
					showNotify({ type: 'danger', message: err });
				})
			},
			closeRegisterPage(){
				this.showRegister=false;
				// this.close;
			}
		},




	}
</script>

<style>
	.next {
		position: absolute;
		bottom: 8vh;
		left: 40%;
		width: 10vh;
		height: 10vh;
		margin: 0 auto;
		background-color: #67C23A;
		border-radius: 100%;
		text-align: center;
		line-height: 12vh;
		font-weight: 700;
		font-size: 5vh;
		color: white;
	}
</style>